﻿@page "/docs/extensions/list-view"

<Seo Canonical="/docs/extensions/list-view" Title="Blazorise List View" Description="Learn how to use Blazorise List View extension components." />

<DocsPageTitle>
    List View component
</DocsPageTitle>

<DocsPageParagraph>
    List views are a flexible and powerful component for displaying a series of content in a contained scrollable view by providing a data source.
</DocsPageParagraph>
<DocsPageParagraph>
    List views use <Code>ListGroup</Code> behind the covers, so you may make use of the <Code>ListGroup</Code> underlying APIs.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicListViewExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicListViewExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Selectable items">
        Add <Code>SelectedItem</Code> and provide <Code>TextField</Code> to indicate the current active selection.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ListViewSelectableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ListViewSelectableExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes Title="ListView">
    <DocsAttributesItem Name="Data" Type="IEnumerable<TItem>">
        Gets or sets the items data-source.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedItem" Type="TItem">
        Gets or sets currently selected item.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedItemChanged" Type="EventCallback<TItem>">
        Occurs after the selected item has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextField" Type="Func<TItem, string>">
        Method used to get the display field from the supplied data source.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Class" Type="string">
        Custom css class-names.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Style" Type="string">
        Custom styles.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Height" Type="string">
        Sets the ListView Height.
    </DocsAttributesItem>
    <DocsAttributesItem Name="MaxHeight" Type="string" Default="250px">
        Sets the ListView MaxHeight.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Flush" Type="bool" Default="false">
        Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
    </DocsAttributesItem>
    <DocsAttributesItem Name="Mode" Type="ListGroupMode" Default="Static">
        Defines the list-group behavior mode.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Attributes" Type="Dictionary<string, object>">
        Captures all the custom attribute that are not part of Blazorise component.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ChildContent" Type="RenderFragment">
        Specifies the content to be rendered inside the ListView.
    </DocsAttributesItem>
</DocsAttributes>
